<template>
  <el-row  class="contact_us">

    <module-title :cn_name="'联系我们'" :en_name="'CONTACT US'" :mname="'contact_us'" ></module-title>

    <el-row>

      <el-col :span="13" :offset="2">
        <iframe src="../static/map.html" style="border:0px; width:100%; height:340px; overflow:hidden" scrolling=no></iframe>
      </el-col>

      <el-col :span="7" class="contact_form_div">

        <el-col :span="24" class="module_title">
          <p class="cn_name">联系我们:</p>
          <p class="en_name">CONTACT US</p>
        </el-col>
        <el-col :span="18" :offset="3">
          <el-form :label-position="labelPosition" class="contact_form" label-width="5em" :model="formLabelAlign">
            <el-form-item label="您的姓名">
              <el-input v-model="formLabelAlign.name" placeholder="请输入您的姓名"></el-input>
            </el-form-item>
            <el-form-item label="您的电话">
              <el-input v-model="formLabelAlign.region" placeholder="请输入您的电话"></el-input>
            </el-form-item>
            <el-form-item label="您的邮箱">
              <el-input v-model="formLabelAlign.type" placeholder="请输入您的邮箱"></el-input>
            </el-form-item>
            <el-form-item label="联系事项">
              <el-autocomplete
                v-model="state1"
                class="contact_project"
                :fetch-suggestions="querySearch"
                placeholder="请输入需联系的事项"
                @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button>重写</el-button>
            </el-form-item>
          </el-form>
        </el-col>

      </el-col>

    </el-row>
  </el-row>
</template>
<script>
  import ModuleTitle from '../Common/module-title'

  export default {
    components : {ModuleTitle},
      data(){
        return {
          labelPosition: 'right',
          formLabelAlign: {
            name: '',
            region: '',
            type: '',
            restaurants: []
          },
          state1: ''
        }
      },
      props : ['contact_us','offsetT','showList'],
      methods:{
        onSubmit() {
          this.$message('提交成功!');
        },
        querySearch(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
        createFilter(queryString) {
          return (restaurant) => {
            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
          };
        },
        loadAll() {
          return [
            { "value": "试听课程" },
            { "value": "咨询课程" },
            { "value": "项目合作" }
          ];
        },
        handleSelect(item) {
        }
      },
    mounted(){
      this.restaurants = this.loadAll();
    }
  }
</script>
<style>
  .contact_us {
    height : 560px;
  }

  .contact_form_div {
    height: 350px;
    border : 1px solid #ccc;
  }

  .contact_form_div .module_title {
    margin-top :1.2em;
    margin-bottom : 1.2em;
  }

  .contact_form_div .module_title .cn_name{
    font-size : 1em;
  }

  .contact_form_div .module_title .en_name{
    font-size : 0.8em;
  }
  .contact_form .el-form-item {
    margin-bottom : 0.9em;
  }
  .contact_project {
    width : 100%;
  }
</style>
